<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sweet Pages: A jQuery Pagination Solution | Tutorialzine demo</title>


<style type ="text/css">
@import url(member/css/home_styles.css);
@import url(member/css/nav_menu.css);
@import url(member/css/jqtransform.css);
@import url(member/css/buttonstyle.css);
@import url(member/css/dropdown.css);

html {

scrollbar-base-color: #9999cc;

scrollbar-arrow-color: white;

scrollbar-track-color: #ccccff;

scrollbar-shadow-color: black;

scrollbar-lightshadow-color: black;

scrollbar-darkshadow-color: gray;

scrollbar-highlight-color: white;

scrollbar-3dlight-color: black;

}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="member/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="member/js/jquery.min.js"></script>
<script type="text/javascript" src="member/js/script.js"></script>
<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
<script type="text/javascript" src="member/js/jquery"></script>
<script type="text/javascript" src="member/js/jquery.jqtransform.js"></script>


<script type="text/javascript">
    $(document).ready(function(){ 
    $("form.jqtransform").jqTransform();
        $("#add_eca").click(function() {
          var choice = $('input[name="ecaid"]:checked').val();
            $('#panel').html('');   
            $('#panel').load('${pageContext.request.contextPath}/member_addrecognized',{formType : "add", ecaSelected : choice},function(){
                        $('#cancelUserForm').click(function(){
                           $('#addForm').html('');
                    });
                });
            $('#panel').hide();
            $('#panel').fadeIn('slow');
        });
        
        $('#add_unrecognized_eca').click(function(){
            $('#panel').load('${pageContext.request.contextPath}/member/member_addunrecognized.jsp');
            $('#panel').hide();
            $('#panel').fadeIn("slow");
        });
        
        
        
        
        });
</script>


</head>

<body>

<h1>SPRINT<br/> 
Membership Management System
</h1>



<div style="margin: auto; width: 1000px; height: 1000px;">
        
        <!-- left panel -->
        <div id="main2" style="float: left; width: 166px;">
        <ul id="navigationMenu" style="float: right;">
            <li>
                    <a class="home" id="home" href="member_showprofile">
                    <span>My Profile</span>
                </a>
            </li>

            <li>
                <a class="about" id="members" href="member_showcurrenteca">
                    <span>My Activities</span>
                </a>
            </li>

            <li>
                    <a class="services" id="eca" href="#">
                    <span>Manage ECA</span>
                </a>
            </li>
        </ul>
        </div>
        <!-- left panel -->
        
        <!-- right panel -->
	<div id="main">
            <div id="member_title" style="text-align:center; color: #616161; font-size: 35px; text-decoration: underline; font-family: Garamond;"> Manage Activities</div> 
            <br/>
            <a href="logout" id ="logout" class="button square red effect-2" style="color: #FFFFFF; margin-left: 420px; ">LOG OUT</a>
            <div id="holder_title"></div>    
            
		
                <br/>
            <!-- black panel for info -->
	    <ul id="holder">
                <form class="jqtransform">
                    <c:forEach var="eca" items="${allList}">
                        <li style="overflow: scroll"><input type="radio" value="${eca.ecaid}" name="ecaid" id="ecaid"> <br/>${eca.name}<br/>${eca.date}<br/>${eca.time}<br/> Points ${eca.points}<br/>${eca.status}</li>    
                    </c:forEach>
                </form>
	    </ul>
            <!-- black panel for info -->
            <br/>
            
            <!-- functional options -->
            <div id="options">
		<div class="button-row">

                <a href="#" id ="add_eca"class="button square blue effect-2" style="color: #FFFFFF;">Add ECA</a>
                <a href="#" id ="add_unrecognized_eca" class="button square green effect-2" style="color: #FFFFFF;">Request ECA</a> 
               

                </div>
            </div>
            <!-- functional options -->
           
            <div id ="panel"></div>   
            
	</div>
        <!-- right panel -->
</div>


</body>
</html>
